<script setup>
defineProps({
  info: {
    type: Object,
    required: true,
  },
  showArrow: {
    type: Boolean,
    default: false,
  },
  placement: {
    type: String,
    default: 'bottom',
  },
  width: {
    type: Number,
    default: 260,
  },
  trigger: {
    type: String,
    default: 'click',
  },
  showButton: {
    type: Boolean,
    default: false,
  },
  showAfter: {
    type: Number,
    default: 300,
  },
})
</script>

<template>
  <el-popover
    :show-arrow="showArrow"
    :placement="placement"
    :width="width"
    :trigger="trigger"
    :show-after="showAfter"
  >
    <template #reference>
      <slot />
    </template>
    <UserCard :info="info" :show-button="showButton" />
  </el-popover>
</template>

<style scoped></style>
